<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../public/lib/element/index.css">
    <script src="../public/lib/vue.js"></script>
    <script src="../public/lib/element/index.js"></script>
</head>

<body class="bodyWrap">
    <!-- 标题层div -->
    <div style="height: 10%;" class="header">
        <!-- <div class="start">
            <h5 style="text-align: center">
                <a style="text-decoration:none" id="introduct" href="www.baidu.com">
                    {{introduct}}
                </a>
            </h5>
        </div> -->
        <div class="center">
            <h4 style="text-align: center" id="title">
                <span class="username">
                    {{user_name}}，
                </span>
                {{title}}
            </h4>
        </div>
        <div class="user">
            <p class="userWrap" id="username" >
                <el-avatar  size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            </p>
        </div>
    </div>

    <div class="content"  id = "againConnect">
        <el-link type="info" class="linkWrap">
            <div style="width: 60%; height: calc(100% - 2px);float:left">
                <h5 v-show="online">{{again}}</h5>
            </div>
            <div style="width: 20%; height: calc(100% - 2px);float:left">
                <h5 style="text-align: center;" v-show="online">
                    <a href="">
                        <el-button type="primary">重连</el-button>
                    </a>
                </h5>
            </div>
        </el-link>
    </div>

    <!-- 房间层div -->
    <div class="footer">
        <div class="roomWrap" id = "room">
            <div class="createRoom item">
                <el-button type="primary" v-on:click="createRoom">{{create}}</el-button>
            </div>
            <el-divider class="dividerH" direction="vertical"></el-divider>
            <div class="joinRoom item">
                <el-button type="primary" v-on:click="createRoom">{{join}}</el-button>
            </div>
        </div>
        <el-divider direction="horizontal " class="divider"></el-divider>
        <div class="otherWrap" id = "present">
            <div class="rule item">
                <el-button type="primary" v-on:click="createRoom">{{rule}}</el-button>
            </div>
            <el-divider class="dividerH" direction="vertical"></el-divider>
            <div class="introduction item">
                <el-button type="primary" v-on:click="createRoom">{{role}}</el-button>
            </div>
        </div>
    </div>

    <!-- 信息层div -->
    <!-- <div style="border: 1px solid #999;width: calc(100% - 2px); position: absolute;bottom: 0%; height: 10%;"
     id = "version">
        <h5 style="text-align: center">{{version}}</h5>
    </div> -->
    <script src="../js/index.js"></script>
</body>

</html>